<template>
  <div>
    <div class="w100 rowsb rowsm bgff h-60 br-20">
        <div class="rowsc rowsm br-20 h100 fs-18" style="width: 33%;" :style="active == 0 ? 'background-color: #E33636;color:#fff;' : 'color:#333;'" @click="active = 0">课程目录</div>
        <div class="rowsc rowsm br-20 h100 fs-18" style="width: 33%;" :style="active == 1 ? 'background-color: #E33636;color:#fff;' : 'color:#333;'" @click="active = 1">课程简介</div>
        <div class="rowsc rowsm br-20 h100 fs-18" style="width: 33%;" :style="active == 2 ? 'background-color: #E33636;color:#fff;' : 'color:#333;'" @click="active = 2">期末考试</div>
    </div>

    <div class="w100" v-if="active == 0">
        <div class="" v-if="courseID == 0">
            <div class="w100 p-all-20 bgff br-16 mt-20 rowsb rowsm pl-20 pr-20" v-for="(item,index) in list1" :key="index">
            <div class="rowscl">
                <div class="fs-20 fw-b mb-10">第{{ index + 1 }}集</div>
                <div class="fs-16 col888">{{item.name}}</div>
            </div>
            <div class="rows rowsm">
                <div class="fs-18 mr-10" style="color: #4878FF;">进度{{item.num}}%></div>
                <div class="w-80 h-30 br-15 rowsc rowsm fs-18 fw-b" style="border: 1px solid #E33636;color: #E33636;" @click="goPlayVideo()">播放</div>
            </div>
        </div>
        </div>


        <div class="" v-if="courseID == 1">
            <div class="w100 p-all-20 bgff br-16 mt-20 rowsb rowsm pl-20 pr-20" v-for="(item,index) in list2" :key="index">
            <div class="rowscl">
                <div class="fs-20 fw-b mb-10">第{{ index + 1 }}集</div>
                <div class="fs-16 col888">{{item.name}}</div>
            </div>
            <div class="rows rowsm">
                <div class="fs-18 mr-10" style="color: #4878FF;">进度{{item.num}}%></div>
                <div class="w-80 h-30 br-15 rowsc rowsm fs-18 fw-b" style="border: 1px solid #E33636;color: #E33636;" @click="goPlayVideo()">播放</div>
            </div>
        </div>
        </div>
    </div>

    <div class="w100" v-if="active == 1">
        <div class="mt-20 p-all-20 w100 bgff br-20" v-if="courseID == 0">
            <div class="fs-22 fw-b col333 mb-16">课程名称:{{info1.title}}</div>
            <div class="col888 fs-20 mb-16">课时：16课时</div>
            <div class="col888 fs-20 mb-16">选课人数：165人</div>
            <div class="col888 fs-20 mb-16">团队介绍：{{info1.introduce}}</div>
            <div class="col888 fs-20">课程简介:{{info1.content}}</div>
        </div>

        <div class="mt-20 p-all-20 w100 bgff br-20" v-if="courseID == 1">
            <div class="fs-22 fw-b col333 mb-16">课程名称:{{info2.title}}</div>
            <div class="col888 fs-20 mb-16">课时：16课时</div>
            <div class="col888 fs-20 mb-16">选课人数：165人</div>
            <div class="col888 fs-20 mb-16">团队介绍：{{info2.introduce}}</div>
            <div class="col888 fs-20">课程简介:{{info2.content}}</div>
        </div>
    </div>

    <div class="w100" v-if="active == 2">
        <div class="mt-20 w100 bgff br-20 rowscl rowsm h-260">
            <div class="col333 fw-b fs-20 mb-20">期末考试的时间为</div>
            <div class="col666 fs-16 mb-40">2024年12月25日-2025年1月5日</div>
            <div class="w-180 h-40 br-20 rowsc rowsm fs-18 fw-b" style="border: 1px solid #E33636;color: #E33636;">确定</div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    courseID:{
        type:Number
    },
    courseIndex:{
        type:Number
    }
  },
  data() {
    return {
        active:0,
        list1:[{name:'大勇不惧',num:100},{name:'大术无极',num:60},{name:'大巧破难',num:0},{name:'大艺法古',num:0}],
        list2:[{name:'劳动教育概论',num:100},{name:'劳动教育与德育',num:60},{name:'劳动教育与智育',num:0},{name:'劳动教育与体育',num:0}],
        info1:{
            title:'大国工匠',
            content:'课程简介:《大国工匠》是央视新间频道2015年4月29日起推出的“五一“特别报道，介绍了8位一线工人的高翃技艺和执着坚守。火箭心脏焊接人高凤林、堅刻大师孟剑锋、双丝钳工顾秋亮、航天手艺人胡双钱、殷瓦焊接工张冬伟、高铁首席研磨师宁允展、深海钳工管延安、捞纸工周东红。这系列节目讲述了不同岗位劳动者用自己的灵巧双手，匠心筑梦的故事。',
            introduce:'高凤林、孟剑锋、顾秋亮、胡双钱、张冬伟、宁允展、管延安、周东红'
        },
        info2:{
            title:'新时代大学生劳动教育',
            content:'把握育人导向，遵循教育规律，体现时代特征。树立正确的劳动观，崇尚劳动、尊重劳动，报效国家，奉献社会。劳动最光荣，劳动最崇高，劳动最伟大，劳动最美丽。',
            introduce:'叶耀辉、黄鑫、郑海珍、路玲、江黎、马越兴、陈海丹、舒丽芳、邓敏芝'
        }
    };
  },
  watch: {

  },
  computed: {},
  methods: {
    goPlayVideo(){
        this.$emit('playVideo')
    }
  },
  created() {
    console.log(this.courseIndex)
    if(this.courseIndex == 4) this.active = 2
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
</style>